<template>
  <div class="relative flex items-top min-h-screen bg-gray-100 p-5">
    <div class="flex flex-col w-screen">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/flipcard' }"
          >记忆卡片</el-breadcrumb-item
        >
        <el-breadcrumb-item>创建卡片组</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="mt-3">
        <el-card>
          <div slot="header" class="clearfix">
            <span>设置卡片组信息</span>
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              @click="saveCards"
              >保存</el-button
            >
          </div>
          <div class="flex flex-col">
            <div>
              <el-divider content-position="left">标题</el-divider>
              <el-input
                placeholder="请输入标题"
                v-model="cardGroupTitle"
                clearable
              >
              </el-input>
              <el-divider content-position="left">卡片</el-divider>
              <el-card class="mt-2" v-for="card in cards">
                <div slot="header" class="clearfix">
                  <el-button
                    style="float: right; padding: 3px 0"
                    type="text"
                    @click="deleteCard(card)"
                    >删除</el-button
                  >
                  <el-divider content-position="left"
                    >新卡片 {{ card.cardIndex }}</el-divider
                  >
                  <el-input
                    v-model="card.cardTitle"
                    placeholder="请输入标题"
                  ></el-input>
                </div>
                <el-input
                  type="textarea"
                  v-model="card.cardNoted"
                  placeholder="请输入简介"
                ></el-input>
              </el-card>
              <div
                class="
                  h-12
                  bg-white
                  p-3
                  mt-2
                  border-2
                  rounded
                  transition
                  hover:shadow-md
                "
                @click="addNewCard()"
              >
                添加新卡片
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      cardGroupTitle: "",
      cardGroupNote: "",
      cards: [
        {
          cardTitle: "",
          cardNoted: "",
          cardIndex: 1,
        },
      ],
    };
  },
  methods: {
    addNewCard() {
      this.cards.push({
        cardTitle: "",
        cardNoted: "",
        cardIndex: this.cards.length + 1,
      });
      console.log("test");
    },
    deleteCard(card) {
      this.cards.splice(this.cards.indexOf(card), 1);
    },
    saveCards() {
      console.log(this.$store.state.info.userInfo.uid);
      axios
        .post("/api/createMyGroups", {
          groupName: this.cardGroupTitle,
          createUid: this.$store.state.info.userInfo.uid,
        })
        .then((res) => {
          if (res.data.msg != undefined) {
            this.$message.error("创建失败 已经拥有此名字的卡片组！");
          } else {
            this.cards.forEach((element) => {
              axios.post("/api/addCard", {
                cardTitle: element.cardTitle,
                cardNoted: element.cardNoted,
                createUid: this.$store.state.info.userInfo.uid,
                groupUid: res.data.data.GroupID,
              });
            });
            this.$message({
              message: "创建成功!",
              type: "success",
            });
            setTimeout(() => {
              this.$router.push({
                path: "/flipcard"
              });
            },1000);
          }
        });
    },
  },
};
</script>